<template>
  <div class="mb-3">
    <!-- <el-button class="mb-15px" type="warning" :icon="Refresh" @click="getList"> 刷新 </el-button> -->
    <el-button class="mb-15px" type="primary" :icon="Document" @click="onSave"> 保存 </el-button>
  </div>
  <!-- 表头 -->
  <DetailHeadTable
    ref="headTable"
    :partParams="data"
    :column="headColumn"
    :list="headList"
  />
  <!-- 列表 -->
  <DetailTable
    class="mt-3"
    ref="table"
    :partParams="data"
    :column="column"
    :list="list"
  />
</template>

<script lang="ts" setup>
import { Refresh, Document } from '@element-plus/icons-vue'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { computed, defineProps, onBeforeUnmount, ref } from 'vue'
import * as BasicApi from '@/api'

import DetailHeadTable from './DetailHeadTable.vue'
import DetailTable from './DetailTable.vue'
import { useMessage } from '@/hooks/useMessage'
import eventBus from '@/libs/eventBus'
const message = useMessage()


//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  data: {
    type: Object,
    default: () => ({ groupName: '', jobType: '', operType: '' })
  }
})

const jobType = computed(()=>{
  return props.data.jobType
})

const emit = defineEmits(['refresh'])

//表头信息
const headColumn = ref<any[]>([])
const headList = ref<any[]>([])
//列表信息
const column = ref<any[]>([])
const list = ref<any[]>([])

const getDetailField = (data: any) => {
  const { detailHeadFieldInfo, detailFieldInfo } = data
  headColumn.value = detailHeadFieldInfo
  column.value = detailFieldInfo
}
//渲染列头
eventBus.on(`getOP3DetailField-${jobType.value}`, getDetailField)

// const loading = ref(false)
const getList = async (data: any) => {
  const { headInfo, listInfo } = data
  headList.value = headInfo ?? []
  list.value = listInfo ?? []
  // loading.value = true
  // try {
  //   const post = {
  //     groupName: props.data.groupName,
  //     jobType: props.data.jobType,
  //     operType: 'GetDetail'
  //   }
  //   const inputStr = objectToQueryParams(post)
  //   //获取行数据
  //   const rowData = sessionStorage.getItem('WMS_OP3_ROW_DATA') as string
  //   const jsonData = JSON.parse(rowData) ?? {}
  //   const result = (await BasicApi.Query({ inputStr, jsonData })) as any
  //   const { code, msg, data, rsCount } = result
  //   if (code !== 200) {
  //     message.error(msg)
  //     return
  //   }
  //   headList.value = data.headInfo ?? []
  //   list.value = data.listInfo ?? []
  // } finally {
  //   loading.value = false
  // }
}

//渲染列表
eventBus.on(`getOP3DetailList-${jobType.value}`, getList)

const onSave = async () => {
  try {
    const inputStr = objectToQueryParams({
      groupName: props.data.groupName,
      jobType: props.data.jobType,
      operType: 'Save'
    })
    const post = {
      inputStr,
      jsonData: {
        headInfo: headList.value,
        listInfo: list.value,
      }
    }
    const res = (await BasicApi.Save(post)) as any
    if (res.code !== 200) {
      message.error(res.msg)
      return
    }
    message.success(res.msg)
    //刷新当前列表
    emit('refresh')
  } finally {
  }
}

// 在组件卸载之前移除侦听
onBeforeUnmount(() => {
  eventBus.off(`getOP3DetailField-${jobType.value}`, getDetailField)
  eventBus.off(`getOP3DetailList-${jobType.value}`, getList)
})
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
